<template>
	<div class="design-header" ref="designHeaderRef">
		<div class="header-left">
			<slot name="left">
				<img class="logo" src="/public/lowCode.svg" alt="" />
				<span>{{ title }}</span>
			</slot>
		</div>
		<div class="header-center">
			<slot name="center"></slot>
		</div>
		<div class="header-right">
			<slot name="right">
                <a-tooltip placement="bottom">
                    <template #title>
                        <span>预览</span>
                    </template>
                    <FullscreenOutlined @click="handlePreview"/>
                </a-tooltip>
			</slot>
		</div>
	</div>
</template>
<script setup>
import { FullscreenOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";

const props = defineProps({
	title: {
		type: String,
		default: "LowCode",
	},
});
const emit = defineEmits(['handlePreview'])
const designHeaderRef = ref();
const handlePreview = () => {
	emit('handlePreview')
}
defineExpose({
	designHeaderRef,
});
</script>
<style scoped lang="scss">
.design-header {
	width: 100%;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 20px;
	box-sizing: border-box;
	.header-left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
        font-weight: bold;
        font-size: 20px;
		.logo {
			width: 24px;
			height: 24px;
		}
	}
	.header-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
        font-size: 20px;
	}
}
</style>
